<template>
  <div class="rank-wrapper">
    <div class="rank-left">
      <div class="rank-icon iconfont" v-html="icon" @click="iconClick"></div>
      <div class="rank-title" @click="iconClick">{{title}}</div>
    </div>
    <div class="rank-right">
      <swiper :options="swiperOption" class="swiper-wrapper">
        <swiper-slide
          v-for="(lis, index) in list"
          :key="index"
          class="swiper-page"
        >
          <div class="item-wrapper">
            <router-link
              tag="div"
              v-for="item of lis"
              :key="item.id"
              class="rank-item"
              :to="'/detail/' + item.movie_id"
            >
              {{item.id}}.{{item.name}}&nbsp;<span class="score">{{item.douban_score}}</span>
            </router-link>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>
<script>
import { animateCSS } from 'common/animate.js'
export default {
  name: 'Rank',
  props: {
    title: String,
    list: Array,
    icon: String,
    animationName: String
  },
  data () {
    return {
      swiperOption: {
        direction: 'vertical'
      }
    }
  },
  methods: {
    iconClick (e) {
      animateCSS(e.target, this.animationName)
    }
  }
}
</script>
<style lang="stylus" scoped>
  .rank-wrapper
    height: 1rem
    width: 3.5rem
    margin: 0 auto
    border-radius: .04rem
    box-shadow: 0 2px 1px rgba(0,0,0,.08);
    margin-bottom: .12rem
    display: flex
    overflow: hidden
    .rank-left
      width: 1rem
      height: 100%
      display: flex
      flex-direction: column
      justify-content center
      align-items: center
      background: #404040
      color: #fff
      .rank-icon
        font-size: .35rem
        line-height: .4rem
      .rank-title
        font-size: .2rem
        line-height: .3rem
    .rank-right
      flex: 1
      height: 100%
      .swiper-wrapper
        height: 1rem
        .swiper-page
          height: 1rem
          .item-wrapper
            height: 1rem
            overflow: hidden
            .rank-item
              font-size: .15rem
              line-height: .2rem
              padding: .066rem .1rem
              .score
                color: #ffac2d
</style>
